import React from 'react';
import { Box, Typography, Container, Grid } from '@mui/material';
import IOSAppStoreCard from 'components/ui/IOSAppStoreCard';
import backgroundImage from 'images/backgroundImage.gif';

const DemoPage = () => {
  return (
    <Container maxWidth="xl" sx={{ py: 4, minHeight: '100vh' }}>
      <Typography variant="h3" sx={{ mb: 3, fontWeight: 'bold', textAlign: 'center' }}>
        Card Animation Grid Demo
      </Typography>
      
      {/* Single featured card at the top */}
      <Box 
        sx={{ 
          display: 'flex', 
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          mb: 3
        }}
      >
        <Box sx={{ width: '100%', maxWidth: 400, height: 220 }}>
          <IOSAppStoreCard
            image={backgroundImage}
            title="Main Featured Card"
            subtitle="Click to expand this beautiful demo"
            borderRadius={3}
            headerSize="h5"
            subHeaderSize="subtitle1"
            textColor="#ffffff"
            backdropColor="#121212"
            backdropOpacity={0.85}
          >
            <Typography variant="body2" sx={{ mb: 2, opacity: 0.9 }}>
              This is a demonstration of our interactive card component using Framer Motion animations and Material UI styling. Click anywhere to return to the original card view.
            </Typography>
          </IOSAppStoreCard>
        </Box>
      </Box>
      
      {/* 2x2 Grid of IOSAppStoreCards */}
      <Box sx={{ display: 'flex', justifyContent: 'center', mb: 3 }}>
        <Grid container spacing={1} sx={{ maxWidth: '600px' }}>
          <Grid item xs={6}>
            <Box sx={{ width: '100%', height: 180 }}>
              <IOSAppStoreCard
                image={backgroundImage}
                title="Featured Property"
                subtitle="Premium location"
                borderRadius={3}
                headerSize="h6"
                subHeaderSize="body2"
                textColor="#ffffff"
                backdropColor="#121212"
                backdropOpacity={0.75}
              >
                <Typography variant="body2" sx={{ opacity: 0.9 }}>
                  Explore this premium property with amazing views and amenities.
                </Typography>
              </IOSAppStoreCard>
            </Box>
          </Grid>
          
          <Grid item xs={6}>
            <Box sx={{ width: '100%', height: 180 }}>
              <IOSAppStoreCard
                image={backgroundImage}
                title="Modern Design"
                subtitle="Urban living"
                borderRadius={3}
                headerSize="h6"
                subHeaderSize="body2"
                textColor="#ffffff"
                backdropColor="#121212"
                backdropOpacity={0.75}
              >
                <Typography variant="body2" sx={{ opacity: 0.9 }}>
                  Contemporary design meets functional living spaces.
                </Typography>
              </IOSAppStoreCard>
            </Box>
          </Grid>
          
          <Grid item xs={6}>
            <Box sx={{ width: '100%', height: 180 }}>
              <IOSAppStoreCard
                image={backgroundImage}
                title="Classic Home"
                subtitle="Family friendly"
                borderRadius={3}
                headerSize="h6"
                subHeaderSize="body2"
                textColor="#ffffff"
                backdropColor="#121212"
                backdropOpacity={0.75}
              >
                <Typography variant="body2" sx={{ opacity: 0.9 }}>
                  Timeless architecture with modern comforts for families.
                </Typography>
              </IOSAppStoreCard>
            </Box>
          </Grid>
          
          <Grid item xs={6}>
            <Box sx={{ width: '100%', height: 180 }}>
              <IOSAppStoreCard
                image={backgroundImage}
                title="Luxury Villa"
                subtitle="Exclusive offer"
                borderRadius={3}
                headerSize="h6"
                subHeaderSize="body2"
                textColor="#ffffff"
                backdropColor="#121212"
                backdropOpacity={0.75}
              >
                <Typography variant="body2" sx={{ opacity: 0.9 }}>
                  Experience unparalleled luxury in this exclusive villa.
                </Typography>
              </IOSAppStoreCard>
            </Box>
          </Grid>
        </Grid>
      </Box>
    </Container>
  );
};

export default DemoPage;